<template>
    <div>
        <div>
            <el-form :inline="true">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="医生姓名">
                            <el-input v-model="commentsParams.doctorName" style="width: 240px;"
                                placeholder="请输入医生姓名"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="评分等级">
                            <el-select v-model="commentsParams.commentsScore" placeholder="请选择" style="width: 240px;">
                                <el-option label="优秀" value="4"></el-option>
                                <el-option label="一般" value="2"></el-option>
                                <el-option label="差" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 第三行 -->
                <el-row>
                    <el-col :span="8">
                        <el-button type="primary" @click="queryHandle" size="small" icon="el-icon-search"
                            plain>查询</el-button>
                        <el-button @click="resetInformHandle" icon="el-icon-s-home" size="small" plain>重置</el-button>
                    </el-col>

                </el-row>
            </el-form>
        </div>

        <div style="margin-top: 10px;">
            <!-- 表格 -->
            <el-table :data="processedTableData" style="width: 100%;" :cell-style="{ padding: '5px' }">
                <el-table-column prop="commentsId" label="序号" style="width: 100px;"></el-table-column>
                <el-table-column prop="doctorName" label="医生" style="width: 100px;"></el-table-column>
                <el-table-column prop="userName" label="评论用户" style="width: 100px;"></el-table-column>
                <el-table-column prop="commentsContent" label="评论内容" style="width: 180px;"
                    show-overflow-tooltip></el-table-column>
                <el-table-column prop="commentsScore" label="评分" style="width: 100px;"></el-table-column>
                <el-table-column prop="commentsScoreStatus" label="评分等级" style="width: 100px;">
                    <template slot-scope="scope">
                        <el-tag :type="getTagType(scope.row.commentsScore)" size="small">
                            {{ scope.row.commentsScoreStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="commentsCreateTime" label="评论时间" style="width: 100px;"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="queryRecordClick(scope.row)" size="mini">
                            病例
                        </el-button>
                        <el-button type="danger" @click="handleDelClick(scope.row)" size="mini">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="this.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="this.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="this.total">
            </el-pagination>
        </div>

        <div>
            <!-- 病例详情对话框 -->
            <el-dialog title="病例详情" :visible.sync="recordDialogVisible" width="70%">
                <el-form :model="recordForm" label-width="120px" ref="recordForm">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="患者姓名">
                                <el-input v-model="recordForm.userName" readonly></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="主治医生">
                                <el-input v-model="recordForm.doctorName" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="就诊日期">
                                <el-date-picker v-model="recordForm.medicalRecordCreateTime" type="date" readonly
                                    style="width: 100%">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="就诊编号">
                                <el-input v-model="recordForm.medicalRecordNumber" readonly></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="诊断结果">
                        <el-input type="textarea" :rows="4" v-model="recordForm.medicalRecord" readonly>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="医嘱">
                        <el-input type="textarea" :rows="4" v-model="recordForm.doctorOpinion" readonly>
                        </el-input>
                    </el-form-item>

                    <!--                     <el-form-item label="药方">
                        <el-input type="textarea" :rows="4" v-model="recordForm.diagnosis" readonly>
                        </el-input>
                    </el-form-item> -->
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="recordDialogVisible = false">关 闭</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import { queryDoctorComments, queryComments, delComments, queryUserRecord } from '@/api/comments/comments.js'
export default {
    data() {
        return {
            commentsParams: {},
            tableData: [],
            total: null,
            currentPage: 1,
            pageSize: 5,
            recordDialogVisible: false,
            recordForm: {
                userName: '',
                doctorName: '',
                medicalRecordCreateTime: '',
                medicalRecordNumber: '',
                medicalRecord: '',
                doctorOpinion: ''
            }
        }
    },
    props: {
        // 接收父组件传递的医生ID
        selectedDoctorId: {
            type: Number,
            default: null
        }
    },
    mounted() {
        this.loadTableData()
    },
    methods: {
        //评分等级标签
        getTagType(score) {
            if (score >= 4) return 'success';  // 优秀 - 绿色
            if (score >= 2) return 'warning'; // 一般 - 黄色
            return 'danger';                  // 差 - 红色
        },
        //重置
        resetInformHandle() {
            this.commentsParams = {
                doctorName: '',
                commentsScoreStatus: ''
            }
            this.queryHandle()
        },
        //查询医生的评论
        async loadTableData() {
            //console.log(this.selectedDoctorId)
            /* if (!this.selectedDoctorId) return; */
            try {
                let temp = {
                    doctorId: this.selectedDoctorId,
                }
                console.log("temp",temp)
                const res = await queryDoctorComments(temp);
                console.log(res);
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            } catch (error) {
                console.error('加载评论失败:', error);
            }
        },

        //数据渲染
        async queryHandle() {
            //console.log(this.selectedDoctorId)
            /* if (!this.selectedDoctorId) return; */
            try {
                let temp = {
                    doctorName: this.commentsParams.doctorName,
                    commentsScore: this.commentsParams.commentsScore
                }
                const res = await queryComments(temp);
                console.log(res);
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            } catch (error) {
                console.error('加载评论失败:', error);
            }
        },

        //删除评论
        handleDelClick(val) {
            console.log(val);
            this.$confirm(`此操作将删除${val.commentsId}这条评论, 是否继续?`, "温馨提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消"
            })
                .then(() => {
                    let temp = {
                        commentsId: val.commentsId
                    }
                    delComments(temp).then(res => {
                        //console.log(res);
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: `评论${val.commentsId}删除成功`
                            })
                        } else {
                            this.$message({
                                type: 'error',
                                message: `评论${val.commentsId}删除失败`
                            })
                        }
                        this.loadTableData();
                    })
                })

        },

        //病例
        queryRecordClick(val) {
            console.log(val)
            this.recordDialogVisible = true
            let temp = {
                commentsId: val.commentsId,
                userId: val.userId
            }
            queryUserRecord(temp).then(res => {
                //console.log("123", res);
                this.recordForm.userName = val.userName,
                    this.recordForm.doctorName = val.doctorName,
                    this.recordForm.medicalRecordCreateTime = res.medicalRecordCreateTime,
                    this.recordForm.medicalRecordNumber = res.medicalRecordNumber,
                    this.recordForm.medicalRecord = res.medicalRecord,
                    this.recordForm.doctorOpinion = res.doctorOpinion
            })

        },

        //分页
        handleSizeChange(val) {
            //console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.loadTableData();
        },
        handleCurrentChange(val) {
            //console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.loadTableData();
        }
    },
    watch: {
        // 监听selectedDoctorId变化
        selectedDoctorId(newVal) {
            if (newVal) {
                //console.log("接收到医生ID:", newVal);
                this.loadTableData();
            }
        }
    },
    //通过计算属性进行区分评论等级
    computed: {
        processedTableData() {
            return this.tableData.map(item => {
                let status = '';
                if (item.commentsScore >= 4) {
                    status = '优秀';
                } else if (item.commentsScore >= 2) {
                    status = '一般';
                } else {
                    status = '差';
                }
                return {
                    ...item,
                    commentsScoreStatus: status
                };
            });
        }
    }
}
</script>

<style></style>
